<template>
  <div ref="imageWrapper">
    <a-card title="查询条件" class="search">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="ruleForm" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="onSearch">
          <a-row :gutter="24">
            <a-col :md="18" :sm="18">
              <a-row :gutter="24">
                <a-col :md="12" :sm="12">
                  <a-form-model-item label="机构名称" prop="unitId">
                    <!-- <j-select-depart v-model="queryParam.unitId" :trigger-change="true" customReturnField="id"
                      :multi="false"></j-select-depart> -->
                    <a-input
                      v-model="queryParam.accName"
                      readOnly
                      placeholder="请选择"
                      @click.native="openOrganModel"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :md="12" :sm="12">
                  <a-form-model-item label="任期时间" prop="arrayTime">
                    <a-range-picker
                      v-model="queryParam.arrayTime"
                      format="yyyy-MM-DD"
                      value-format="yyyy-MM-DD"
                      @change="handleDatechange"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-col>
            <a-col :md="6" :sm="6">
              <span style="float: right" class="table-page-search-submitButtons">
                <a-button type="primary" @click="onSearch" icon="search" class="yellow_search_btn">查询</a-button>
                <a-button @click="searchReset" icon="reload" class="clear_btn">清除条件</a-button>
                <a-button
                  type="danger"
                  :loading="ydLoading"
                  icon="arrow-right"
                  style="margin-left: 18px"
                  @click="handleToYD(false)"
                  >转疑点</a-button
                >
                <a-button v-if="isBackButton" type="primary" style="margin-left: 8px" @click="backUppage">
                  返回
                </a-button>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card class="img_css" style="margin-top: 20px">
      <div class="Exceed_funds_map">
        <div class="title">
          <span @click="getModelData">
            {{ '分包准入管理模型' }}
            <a-icon type="strikethrough" @click.stop="showImg" />
          </span>
        </div>
        <div class="midline">
          <div class="line_v" />
          <div class="line_h" />
        </div>
        <div class="content_box">
          <div class="content_item">
            <div class="line_v" />
            <div class="step3_left_left">
              <div class="title">
                {{ '不合格分包企业数量' }}
              </div>
              <div class="count">
                {{ numData.noSubEntpNum || 0 }}
              </div>
              <a-icon type="caret-down" class="logo" />
            </div>
          </div>
          <div class="content_item">
            <div class="line_v" />
            <div class="step3_left_left">
              <div class="title">
                {{ '不合格分包企业计价金额' }}
              </div>
              <div class="count">{{ numData.conAmt || 0 }} {{ '万元' }}</div>
              <a-icon type="caret-down" class="logo" />
            </div>
          </div>
          <div class="content_item">
            <div class="line_v" />
            <div class="step3_left_left">
              <div class="title">
                {{ '涉及项目数量' }}
              </div>
              <div class="count">
                {{ numData.proNum || 0 }}
              </div>
              <a-icon type="caret-down" class="logo" />
            </div>
          </div>
        </div>
      </div>
    </a-card>

    <a-card style="margin-top: 20px">
      <a-table
        :columns="columns"
        :data-source="dataSource"
        rowKey="id"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: true }"
        :row-selection="rowSelection"
        class="antableClass"
        @change="handleTableChange"
      >
        <template slot="action" slot-scope="text, record, index">
          <a @click="handlerCheck(0, record)">黑名单查看</a>
          <a-divider type="vertical" />
          <a @click="handlerCheck(1, record)">分包队伍查看</a>
          <a-divider type="vertical" />
          <a @click="handlerCheck(2, record)">合格分包商查看</a>
        </template>
      </a-table>
    </a-card>
    <BusinessChart ref="businesschart" :flowimg="flowimg" />
    <YDModel ref="YDModel" :router-data="$route.path" />
    <!-- <CheckAndEditModel ref="modalForm"></CheckAndEditModel> -->
    <CheckOrganModal ref="departModal" @ok="handlerCheckOrganModal"></CheckOrganModal>
  </div>
</template>


<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@/api/manage'
import CheckOrganModal from '@/views/sj/sjxmzygl/yzzx/testcomponent2/CheckOrganModal'
import BusinessChart from './BusinessChart'
import { base64toImg } from '@/mixins/base64toImg'
import YDModel from './YDModel'
import html2canvas from 'html2canvas'
import { beforeyearYMD, currentYMD } from '@/mixins/commontime.js'
import jumpConfigMixin from '@/views/sj/sjxmzygl/sjxmss/jumpConfigMixin'
import columns from './columns'
// import CheckAndEditModel from './ModalView/CheckAndEditModel'

export default {
  components: { CheckOrganModal, BusinessChart, YDModel },
  mixins: [JeecgListMixin, base64toImg, jumpConfigMixin],
  data() {
    return {
      ydLoading: false,
      numData: {},
      queryParam: {
        unitId: '',
        accName: '',
        endTime: currentYMD(),
        startTime: beforeyearYMD(3, 'years'),
        id: '756be7d7fb510292cce689b3606c945f',
        extraFlag: false,
        arrayTime: [beforeyearYMD(3, 'years'), currentYMD()],
        modelId: '756be7d7fb510292cce689b3606c945f',
      },
      isBackButton: false,
      url: {
        list: '/sjmx/queryFbzrglInfo',
        //统计图
        num: '/sjmx/queryFbzrglmxNum',
        //流程图
        model: '/dataModel/queryDataModelTemplateByExtra',
        // 导出
        export: '/sjmx/exportRqkhzb',
        // 查询模型转疑点信息(多选)
        TurnSuspects: '/sjmx/queryModelMsgMulti',
      },
      rules: {
        unitId: [{ required: true, message: '请选择机构', trigger: 'change' }],
        arrayTime: [{ required: true, message: '请选择任期时间' }],
      },
      columns: columns(),
      DataModel: {},
      flowimg: '',
      disableMixinCreated: true,
      selectedRows: [],
      selectedRowKeys: [],
      routerParams: [
        { id: 'f78209d33b4831744d34916b2bce1f7b', pid: 'e64079ce56a16f8c4cfc05519b6768cd' },
        { id: 'c720b7b884e22dfcb930ceb1004fc781', pid: 'e64079ce56a16f8c4cfc05519b6768cd' },
        { id: 'f2c8bd472c33a982cae28ee3683b7551', pid: 'e64079ce56a16f8c4cfc05519b6768cd' },
      ],
    }
  },
  watch: {
    $route: {
      handler: function (to) {
        if (Object.keys(to.query).length) {
          this.disableMixinCreated = true
          this.selectedRowKeys = to.query.selectedRowKeys.split(' ') || []
          to.query.selectedRowKeys && delete to.query.selectedRowKeys
          this.queryParam = Object.assign(this.queryParam, to.query)
          this.queryParam.arrayTime = to.query.arrayTime.split(',')
          this.$nextTick(() => {
            // 这可能存在问题
            this.onSearch()
          })
        } else if (Object.keys(to.params).length && to.params.from == 'sjxmss') {
          debugger
          let { endDate, startDate } = JSON.parse(to.params.returnRecord)
          let { departId, accName, returnRecord } = to.params
          this.queryParam.arrayTime = [startDate, endDate]
          this.queryParam.unitId = departId
          this.queryParam.endTime = endDate
          this.queryParam.startTime = startDate

          this.isBackButton = true
          this.returnRecord = to.params.returnRecord

          this.$nextTick(() => {
            // 这可能存在问题
            this.onSearch()
          })
        }
      },
      immediate: true,
    },
  },
  computed: {
    aotuScrollX() {
      return (this.columns.length - 10) * 130 + 1000
    },
    // 行选择
    rowSelection() {
      console.log(this.selectedRowKeys)
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = [...selectedRowKeys]
          this.selectedRows = [...selectedRows]
        },
      }
    },
  },
  methods: {
    searchReset() {
      this.queryParam = {
        unitId: '',
        endTime: '',
        startTime: '',
        accName: '',
        id: '756be7d7fb510292cce689b3606c945f',
        extraFlag: false,
        modelId: '756be7d7fb510292cce689b3606c945f',
      }
      this.dataSource = []
      this.DataModel = {}
    },
    handlerCheckOrganModal(data) {
      console.log(data)
      this.queryParam.unitId = data.orgId
      this.queryParam.accName = data.orgName
    },
    onSearch() {
      this.series = []
      this.$refs.ruleForm.validate((value) => {
        console.log(value)
        if (value) {
          this.loadData(1)
          this.getModelData()
          this.getNum()
        }
      })
    },
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    getNum() {
      getAction(this.url.num, this.queryParam).then((res) => {
        if (res.success) {
          if (res.result.records[0]) {
            this.numData = res.result.records[0]
          } else {
            this.numData = { noSubEntpNum: 0, conAmt: 0, proNum: 0 }
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getModelData() {
      getAction(this.url.model, this.queryParam).then((res) => {
        if (res.success) {
          this.DataModel = res.result[0]
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    showImg() {
      if (Object.keys(this.DataModel).length != 0) {
        this.flowimg = `${window._CONFIG['domianURL']}/sys/common/static/${this.DataModel.mxUrl}`
        this.$refs.businesschart.show()
      } else this.$message.warning('请先配置查询条件')
    },
    handleDatechange(dates) {
      this.queryParam.startTime = dates[0]
      this.queryParam.endTime = dates[1]
    },
    handleToYD(record) {
      if (this.dataSource.length) {
        const { startTime = '', endTime = '' } = this.queryParam
        let param = Object.assign({}, this.queryParam, {
          selectedRowKeys: this.selectedRowKeys.join(' '),
        })
        let ydnr = undefined
        let gzzd = undefined
        let time = `【${startTime}～${endTime}】【分包准入管理模型】`
        let ydList = JSON.stringify(this.selectedRows)
        postAction(this.url.TurnSuspects, Object.assign({}, this.queryParam, { ydList: ydList })).then((res) => {
          if (res.success) {
            if (res.result.length) {
              ydnr = res.result[0].ydms ? res.result[0].ydms : ydnr
              gzzd = res.result[0].gzzd ? res.result[0].gzzd : gzzd
            }
            this.addYd(param, ydnr, time, gzzd)
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      } else {
        this.$message.error('空数据不能新建疑点')
      }
    },
    addYd(record, ydnr, time, gzzd) {
      this.ydLoading = true
      html2canvas(this.$refs.imageWrapper).then((canvas) => {
        let dataURL = canvas.toDataURL('image/png')
        console.log('父组件调用完了')
        this.$refs.YDModel.show(record, dataURL, ydnr, time, gzzd)
        this.ydLoading = false
      })
    },
    handlerCheck(num, record) {
      this.$router.push({
        path: '/sjxmzygl/yzzx/sbwzyz',
        query: {
          ...this.routerParams[num],
          record: JSON.stringify(record),
        },
      })
    },
    // 导出表格
    // download() {
    //   if (this.dataSource.length != 0) {
    //     getAction(this.url.export, this.queryParam).then((res) => {
    //       if (res.success) {
    //         this.handleDownloadFile(res.result)
    //       }
    //     })
    //   } else {
    //     this.$message.warning('请先查询')
    //   }
    // },
    // handleDownloadFile(fileUrl) {
    //   this.$message.success('正在下载，请稍等！')
    //   let url = `${window._CONFIG['domianURL']}/sys/common/download/${fileUrl}`
    //   window.open(url, '_blank')
    // },
  },
}
</script>
<style lang="less">
.bgc_tooltip {
  .ant-tooltip-inner {
    // 这里是框框
    border-radius: 20px;
    color: #333;
    width: 400px;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.8) !important;
  }

  .ant-tooltip-arrow::before {
    // 这里是小三角形
    background-color: #fff !important;
  }
}
</style>
<style lang="less" scoped>
@import '~@assets/less/tableTheme.less';

.ant-table-fixed-left .ant-table-thead > tr > th:last-child {
  border-top-right-radius: 0;
  background-color: red;
  padding: 0;
}

.img_css /deep/ .ant-card-body {
  padding-top: 7px;
}

/deep/ .ant-table-thead {
  tr {
    th {
      text-align: center !important;
    }
  }
}
/deep/.ant-table td { white-space: nowrap; }
.Exceed_funds_map {
  width: 100%;
  position: relative;

  .title {
    // width: 350px;
    height: 50px;
    text-align: center;
    margin: 0 auto;

    padding-top: 7px;

    span {
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
      font-size: 22px;
      color: white;
      padding: 10px 35px 15px;
      background-color: rgb(1, 69, 142);
    }
  }

  .midline {
    margin: 0 auto;
    width: 83.5%;
    height: 40px;

    .line_v {
      margin: 0 auto;
      width: 4px;
      height: 36px;
      border-left: 2px dotted rgb(1, 69, 142);
    }

    .line_h {
      margin: 0 auto;
      width: 80%;
      border-bottom: 2px dotted rgb(1, 69, 142);
    }
  }

  .content_box {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .content_item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .line_v {
        margin: 0 auto;
        height: 15px;
        width: 4px;
        border-left: 2px dotted rgb(1, 69, 142);
      }

      display: flex;
      justify-content: space-around;
      align-items: center;

      .step3_left_left {
        // flex-shrink:1;
        width: 200px;
        height: 70px;
        border: 2px solid #000e89;
        font-size: 16px;
        font-weight: 700;
        color: white;
        text-align: center;
        cursor: pointer;

        .title {
          height: 35px;
          line-height: 20px;
          background-color: rgb(1, 69, 142);
        }

        .count {
          line-height: 30px;
          height: 31px;
          color: rgb(1, 69, 142);
        }

        .logo {
          position: relative;
          top: -5px;
          color: #fff;
        }
      }

      .step3_left_left {
        margin-left: 10px;
      }
    }
  }

  .active {
    .title {
      background-color: rgb(236, 149, 54) !important;
      height: 30px;
      padding-bottom: 10px !important;
    }

    .count {
      color: orange !important;
      background-color: rgb(253, 245, 236);
    }

    .logo {
      color: rgb(236, 149, 54) !important;
    }

    border: 2px solid #ec9536 !important;
  }
}
</style>
